<template>
    <div :class="grid">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">

/**
 * grid 布局
 *
 * 基于 css 也能实现，不过组件化之后，更易于使用 grid 布局
 */
interface Props {
    /**
     * 列数
     *
     * 均分总宽度，默认值为 3
     */
    col?: number | string
    /**
     * 间距（可选，按需扩展）
     */
    gap?: 'default'| string
}

const props = withDefaults(defineProps<Props>(), {col: 3, gap: 'default'});

const grid = `grid-col-${props.col} gap-${props.gap}`;
</script>
